<template>
  <ag-popup v-model="visible" title="选择显示空间" class="box" @onCancel="onCancel">
    <div class="content">
      <el-checkbox-group v-model="selectLayers" name="checkboxgroup" @change="change">
        <el-checkbox v-for="item in layers" :label="item.value" :key="item.value">{{ item.label }}</el-checkbox>
      </el-checkbox-group>
    </div>
  </ag-popup>
</template>
<script>
import AgPopup from "@/views/components/precut/AgPopup.vue";
var axios = agcim.net.http;
import qs from "qs";

let targetLayer = null;
export default {
  components: {
    "ag-popup": AgPopup,
  },
  props: {
    curSelectNodeInfo: {
      type: Object,
      default() {
        return "";
      },
    },
  },
  data() {
    return {
      visible: false,
      selectLayers: [],
      layers: [],
    };
  },
  methods: {
    onShow() {
      targetLayer = CIM.layerTree.getLayerById(this.curSelectNodeInfo.id);
      if (!targetLayer) {
        return this.$message.info("请先打开图层");
      }
      this.visible = true;
      this.selectLayers = [];

      this.getChildrenLayers();
      // targetLayer._primitives.forEach((item) => {
      //   if (item.show) this.selectLayers.push(item.agMetaData.id);
      // });

      //默认存在就显示默认列表-------需要改sdk里面的接口，用上面方法替代。
      let o = CIM.layerTree._layerTreeData[this.curSelectNodeInfo.id];
      let data = JSON.parse(o.data);
      if (data.selectLayers && data.selectLayers.length > 0) {
        this.selectLayers = data.selectLayers;
        this.change();
      }
    },
    //子图层列表
    async getChildrenLayers() {
      let res = await agcim.net.http.get(this.curSelectNodeInfo.url);
      this.layers = res.children.map((item) => {
        return {
          label: item.title,
          value: item.id,
        };
      });
    },
    async onCancel() {
      this.visible = false;
      if (this.selectLayers.length > 0) {
        this.save();
      }
    },
    async save() {
      let o = CIM.layerTree._layerTreeData[this.curSelectNodeInfo.id];
      let data = JSON.parse(o.data);
      data["selectLayers"] = this.selectLayers;
      o.data = JSON.stringify(data);

      let param = {
        data: JSON.stringify(data),
        id: this.curSelectNodeInfo.id,
      };
      let res = await axios.post(
        "http://192.168.4.4/agcim-viewer-rest/layer/updateExtendInfo",
        qs.stringify(param)
      );
      if (res.success) {
        console.log("记录关闭前的作为默认的状态");
      }
    },
    change() {
      if (targetLayer) {
        targetLayer._primitives.forEach((item) => {
          item.agMetaData.show = false;
          item.show = false;
          this.selectLayers.forEach((selectId) => {
            if (item.agMetaData.id === selectId) {
              item.agMetaData.show = true;
              item.show = true;
            }
          });
        });
      }
    },
  },
};
</script>

<style scoped lang="less">
.box {
  width: 300px;
}

.content {
  padding: 20px;
}

::v-deep .el-checkbox {
  line-height: 36px;
  margin-right: 40px;
}

::v-deep .el-checkbox__label {
  color: #fff;
}

::v-deep .el-checkbox__inner {
  background: transparent;
}
</style>